<!DOCTYPE HTML>
<!--
	二手电子乐园 - VIP特权说明页
	基于 Helios by HTML5 UP 模板改造
-->
<html>
<head>
	<title>VIP特权 - 二手电子乐园</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<meta name="description" content="了解二手电子乐园VIP用户特权和权益，享受更多专属服务" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	<style>
		[v-cloak] { display: none; }
		.vip-hero {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 3em 0;
			text-align: center;
			margin-bottom: 2em;
		}
		.vip-hero h1 {
			font-size: 3em;
			margin-bottom: 0.5em;
		}
		.vip-hero p {
			font-size: 1.2em;
			opacity: 0.9;
		}
		.privilege-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 2em;
			margin-bottom: 3em;
		}
		.privilege-card {
			background: white;
			padding: 2em;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			text-align: center;
			transition: transform 0.3s ease;
		}
		.privilege-card:hover {
			transform: translateY(-5px);
		}
		.privilege-icon {
			width: 80px;
			height: 80px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 1em auto;
			font-size: 2em;
			color: white;
		}
		.privilege-card h3 {
			color: #333;
			margin-bottom: 1em;
		}
		.privilege-card p {
			color: #666;
			line-height: 1.6;
		}
		.pricing-section {
			background: #f8f9fa;
			padding: 3em 0;
			margin: 3em 0;
		}
		.pricing-card {
			background: white;
			padding: 2em;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			text-align: center;
			max-width: 400px;
			margin: 0 auto;
		}
		.pricing-card .price {
			font-size: 3em;
			color: #667eea;
			font-weight: bold;
			margin: 1em 0;
		}
		.pricing-card .price small {
			font-size: 0.4em;
			color: #666;
		}
		.feature-list {
			list-style: none;
			padding: 0;
			margin: 2em 0;
		}
		.feature-list li {
			padding: 0.5em 0;
			border-bottom: 1px solid #eee;
		}
		.feature-list li:before {
			content: "✓";
			color: #27ae60;
			font-weight: bold;
			margin-right: 0.5em;
		}
		.upgrade-btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 1em 2em;
			border: none;
			border-radius: 25px;
			font-size: 1.1em;
			cursor: pointer;
			transition: all 0.3s ease;
		}
		.upgrade-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
		}
		.faq-section {
			margin-top: 3em;
		}
		.faq-item {
			background: white;
			margin-bottom: 1em;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 2px 10px rgba(0,0,0,0.1);
		}
		.faq-question {
			background: #f8f9fa;
			padding: 1.5em;
			cursor: pointer;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.faq-question:hover {
			background: #e9ecef;
		}
		.faq-answer {
			padding: 1.5em;
			border-top: 1px solid #eee;
			line-height: 1.6;
		}
		.contact-section {
			background: #667eea;
			color: white;
			padding: 3em 0;
			text-align: center;
			margin-top: 3em;
		}
	</style>
</head>
<body class="is-preload" v-scope v-cloak>
	<div id="page-wrapper">
		<!-- Header Container -->
		<div id="header-container"></div>

		<!-- VIP Hero Section -->
		<section class="vip-hero">
			<div class="container">
				<h1>VIP 特权</h1>
				<p>升级VIP，享受专属特权，让您的二手交易更高效</p>
			</div>
		</section>

		<!-- Main -->
		<div class="wrapper style1">
			<div class="container">
				<!-- 特权介绍 -->
				<section>
					<header class="major">
						<h2>VIP 专属特权</h2>
						<p>成为VIP会员，享受以下专属权益</p>
					</header>

					<div class="privilege-grid">
						<div v-for="privilege in privileges" :key="privilege.title" class="privilege-card">
							<div class="privilege-icon">
								<i :class="privilege.icon"></i>
							</div>
							<h3>{{ privilege.title }}</h3>
							<p>{{ privilege.description }}</p>
						</div>
					</div>
				</section>

				<!-- 价格方案 -->
				<section class="pricing-section">
					<div class="container">
						<header class="major">
							<h2>VIP 价格方案</h2>
							<p>选择适合您的VIP套餐</p>
						</header>

						<div class="pricing-card">
							<h3>VIP 会员</h3>
							<div class="price">
								¥99
								<small>/年</small>
							</div>
							<ul class="feature-list">
								<li>优先展示商品</li>
								<li>诚信卖家标记</li>
								<li>无限发布商品</li>
								<li>专属客服支持</li>
								<li>数据统计分析</li>
								<li>批量管理工具</li>
							</ul>
							<button class="upgrade-btn" @click="handleUpgrade">
								{{ isLoggedIn ? '立即升级' : '请先登录' }}
							</button>
						</div>
					</div>
				</section>

				<!-- 常见问题 -->
				<section class="faq-section">
					<header class="major">
						<h2>常见问题</h2>
					</header>

					<div class="faq-item" v-for="(faq, index) in faqs" :key="index">
						<div class="faq-question" @click="toggleFaq(index)">
							<span>{{ faq.question }}</span>
							<span>{{ openFaqs.includes(index) ? '−' : '+' }}</span>
						</div>
						<div v-show="openFaqs.includes(index)" class="faq-answer">
							{{ faq.answer }}
						</div>
					</div>
				</section>
			</div>
		</div>

		<!-- 联系我们 -->
		<section class="contact-section">
			<div class="container">
				<h2>需要帮助？</h2>
				<p>如有任何疑问，请联系我们的客服团队</p>
				<p><strong>客服电话：</strong>400-123-4567</p>
				<p><strong>客服邮箱：</strong>vip@2ndelectronics.com</p>
				<p><strong>服务时间：</strong>周一至周日 9:00-18:00</p>
			</div>
		</section>

		<!-- Footer Container -->
		<div id="footer-container"></div>
	</div>

	<!-- Scripts -->
	<script src="utils/loader.js"></script>
	<script>
		// 等待所有脚本加载完成后初始化页面
		window.addEventListener('scriptsLoaded', function() {
			// 加载公共组件
			fetchHtml.fetchAll();
			
			// 初始化 petite-vue
			const { createApp } = PetiteVue;
			
			createApp({
				// 数据
				privileges: [
					{
						title: '优先展示',
						description: '您的商品将在搜索结果和分类页面中优先展示，获得更多曝光机会',
						icon: 'fas fa-star'
					},
					{
						title: '诚信标记',
						description: '获得"诚信卖家"特殊标记，提高买家信任度，促进交易成功',
						icon: 'fas fa-shield-alt'
					},
					{
						title: '无限发布',
						description: '不限制每月发布商品的数量，随时发布您的闲置物品',
						icon: 'fas fa-infinity'
					},
					{
						title: '专属客服',
						description: '获得专属客服支持，优先解决问题，享受一对一服务',
						icon: 'fas fa-headset'
					},
					{
						title: '数据分析',
						description: '查看商品浏览量、询盘数据等统计信息，优化发布策略',
						icon: 'fas fa-chart-line'
					},
					{
						title: '批量管理',
						description: '使用批量编辑、批量上架下架等高效管理工具',
						icon: 'fas fa-tools'
					}
				],
				faqs: [
					{
						question: 'VIP会员有效期是多久？',
						answer: 'VIP会员有效期为一年，从购买之日起计算。到期前我们会提醒您续费。'
					},
					{
						question: '如何成为VIP会员？',
						answer: '请先登录您的账户，然后点击"立即升级"按钮。由于这是信息展示平台，具体升级流程请联系客服。'
					},
					{
						question: 'VIP会员可以退款吗？',
						answer: '根据我们的服务条款，VIP会员费用一经支付不予退款。但如遇特殊情况，可联系客服协商处理。'
					},
					{
						question: '普通用户可以发布商品吗？',
						answer: '为了保证平台商品质量，目前只有VIP会员才能发布商品。普通用户可以浏览和查看商品信息。'
					},
					{
						question: 'VIP特权什么时候生效？',
						answer: '升级VIP后，所有特权立即生效。您可以马上享受优先展示、无限发布等所有VIP权益。'
					}
				],
				openFaqs: [],
				isLoggedIn: false,
				
				// 生命周期
				mounted() {
					this.isLoggedIn = localStorage.getItem('isLogin') === 'true';
				},
				
				// 方法
				toggleFaq(index) {
					const faqIndex = this.openFaqs.indexOf(index);
					if (faqIndex > -1) {
						this.openFaqs.splice(faqIndex, 1);
					} else {
						this.openFaqs.push(index);
					}
				},
				
				handleUpgrade() {
					if (!this.isLoggedIn) {
						alert('请先登录后再升级VIP');
						window.location.href = 'login.html?return=' + encodeURIComponent(window.location.href);
						return;
					}
					
					alert('VIP升级功能正在开发中，请联系客服：400-123-4567 进行人工升级。');
				}
			}).mount();
		});
	</script>
</body>
</html>
